<template>
    <div>{{msg}}</div>
    <div class="mui-content enterpriseOrder mgb2">
        <!--订单列表-->
        <div class="tabClick">
            <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
                <a class="mui-control-item mui-active"  id="enterAllItem"  href="#enterAll">全部</a>
                <a class="mui-control-item" id="enterNeedConfirmItem" href="#enterNeedConfirm">
                    <span class="tabText">
                        待确认
                        <span class="mui-dot" v-if="needConfirm.length!=0"></span>
                    </span>

                </a>
                <a class="mui-control-item" id="enterNeedRepairItem" href="#enterNeedRepair">
                    <span class="tabText">
                        待维修
                        <span class="mui-dot" v-if="needRepair.length!=0"></span>
                    </span>
                </a>
                <a class="mui-control-item" id="enterCompleteItem" href="#enterComplete">已完成</a>
                <a class="mui-control-item" id="enterCloseItem" href="#enterClose">已关闭</a>
            </div>
        </div>
        <div class="tabBox">
            <!--全部-->
            <div id="enterAll" class="mui-control-content mui-active">
                <!--没有订单时显示-->
                <div class="notOrder" v-if="orders.length==null||orders.length==0">
                    <div class="orderIcon mui-text-center">
                        <i class="icon-daipingjia color7 text6-size"></i>
                    </div>
                    <p class="evaluateText mui-text-center text2-size color2">暂无相关订单</p>
                </div>
                <!--有订单时显示-->
                <ul v-for="order in orders" class="mui-table-view mgb1" v-show="order.orderStatus!=1" v-link="{name:'enterpriseOrderDetail',params:{id:order.orderCode}}">
                    <li class="mui-table-view-cell orderTitle" >
                        <p class="col-8  text3">
                            <span class="color1">订单编号:</span>
                            <span class="color1">{{order.orderCode}}</span>
                        </p>
                        <p v-if="order.orderStatus==2" class="col-4 mui-text-right orderType notConfirm">待确认</p>
                        <p v-if="order.orderStatus==3" class="col-4 mui-text-right orderType notRepair">待维修</p>
                        <p v-if="order.orderStatus==4" class="col-4 mui-text-right orderType notEvaluate">待评价</p>
                        <p v-if="order.orderStatus==5" class="col-4 mui-text-right orderType finish">已完成</p>
                        <p v-if="order.orderStatus==6" class="col-4 mui-text-right orderType alreadyClosed">已关闭</p>
                    </li>
                    <li class="mui-table-view-cell orderText">
                        <p class="col-6">
                            <span class="color1 text2-size">{{order.carPlateNumber}}</span>
                        </p>
                        <p class="col-6 mui-text-right">
                            <span class="color2 text3-size">预估：</span>
                            <span class="color1 text2-size">{{order.orderTotalAmount | currency '￥' 2}}</span>
                        </p>
                    </li>
                    <li class="mui-table-view-cell orderContacts">
                        <p class="col-6">
                            <span class="color2 text3-size">{{order.orderContact}}，{{order.orderContactPhone}}</span>
                        </p>
                        <p class="col-6" v-if="order.orderStatus==3||order.orderStatus==4||order.orderStatus==5">
                            <span class="color1 text3-size mui-pull-right mui-text-right" v-if="order.orderStatus==3||order.orderStatus==5">{{order.orderAppointTime}}到店</span>
                        </p>
                    </li>
                    <li class="mui-table-view-cell" v-show="order.orderStatus==2 || order.orderStatus==3 || order.orderStatus==5||order.orderStatus==4">
                        <!--待确认操作按钮-->
                        <div class="mui-pull-right orderOperateBtn" v-if="order.orderStatus==2">
                            <div class="mui-pull-left" v-if="order.orderStatus==2">
                                <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined confirmRepairBtn"  v-link="{name:'enterpriseOrderDetail',params:{id:order.orderCode}}">维修预约</button>
                            </div>
                            <div class="mui-pull-left" v-if="order.orderStatus==2">
                                <button type="button" class="mui-btn mui-btn-outlined cancelOrderBtn"  v-link="{name:'orderCancel',params:{id:order.orderCode}}">取消订单</button>
                            </div>
                        </div>
                        <!--待维修操作按钮-->
                        <div class="orderOperateBtn mui-pull-right" v-if="order.orderStatus==3">
                            <div class="mui-pull-left" v-if="order.orderStatus==3">
                                <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined confirmRepairBtn" @click.stop="finish(order.orderCode)">维修竣工</button>
                            </div>
                            <div class="mui-pull-left"  v-if="order.orderStatus==3">
                                <button type="button" class="mui-btn mui-btn-outlined cancelOrderBtn" v-link="{name:'orderCancel',params:{id:order.orderCode}}">取消订单</button>
                            </div>
                        </div>
                        <!--已完成操作按钮-->
                        <div class="mui-pull-right orderOperateBtn" v-if="order.orderStatus==5">
                            <div class="mui-pull-left" v-if="order.orderStatus==5"  style="padding-right: 0;">
                                <button type="button" class="mui-btn mui-btn-primary viewRatingsBtn" v-link="{name:'enterpriseComments'}">查看评价</button>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!--待确认-->
            <div id="enterNeedConfirm" class="mui-control-content">
                        <!--没有待确认订单时显示-->
                        <div class="notOrder" v-if="needConfirm.length==0">
                            <div class="orderIcon mui-text-center">
                                <i class="icon-daipingjia color7 text6-size"></i>
                            </div>
                            <p class="evaluateText mui-text-center color2 text2-size">暂无相关订单</p>
                        </div>
                        <!--有待确认订单时显示-->
                        <ul v-for="order in needConfirm" class="mui-table-view mgb1" v-link="{name:'enterpriseOrderDetail',params:{id:order.orderCode}}">
                            <li class="mui-table-view-cell orderTitle">
                                <p class="col-8  text3">
                                    <span class="color1">订单编号:</span>
                                    <span class="color1">{{order.orderCode}}</span>
                                </p>
                                <p class="col-4 mui-text-right orderType notConfirm">待确认</p>
                            </li>
                            <li class="mui-table-view-cell orderText">
                                <p class="col-6">
                                    <span class="color1 text2-size">{{order.carPlateNumber}}</span>
                                </p>
                                <p class="col-6 mui-text-right">
                                    <span class="color2 text3-size">预估：</span>
                                    <span class="color1 text2-size">{{order.orderTotalAmount | currency '￥' 2}}</span>
                            </span>
                                </p>
                            </li>
                            <li class="mui-table-view-cell orderContacts">
                                <p class="color2 text3-size">{{order.orderContact}}，{{order.orderContactPhone}}</p>
                            </li>
                            <li class="mui-table-view-cell">
                                <div class="mui-pull-right orderOperateBtn">
                                    <div class="mui-pull-left" v-link="{name:'enterpriseOrderDetail',params:{id:order.orderCode}}">
                                        <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined confirmRepairBtn">维修预约</button>
                                    </div>
                                    <div class="mui-pull-left" v-link="{name:'orderCancel',params:{id:order.orderCode}}">
                                        <button type="button" class="mui-btn mui-btn-outlined cancelOrderBtn">取消订单</button>
                                    </div>
                                </div>
                            </li>
                        </ul>
            </div>
            <!--待维修-->
            <div id="enterNeedRepair" class="mui-control-content">
                        <!--没有待维修订单时显示-->
                        <div class="notOrder" v-if="needRepair.length==0">
                            <div class="orderIcon mui-text-center">
                                <i class="icon-daipingjia color7 text6-size"></i>
                            </div>
                            <p class="evaluateText mui-text-center color2 text2-size">暂无相关订单</p>
                        </div>
                        <!--有待维修订单时显示-->
                        <ul v-for="order in needRepair" class="mui-table-view mgb1" v-link="{name:'enterpriseOrderDetail',params:{id:order.orderCode}}">
                            <li class="mui-table-view-cell orderTitle">
                                <p class="col-8  text3">
                                    <span class="color1">订单编号:</span>
                                    <span class="color1">{{order.orderCode}}</span>
                                </p>
                                <p class="col-4 mui-text-right orderType notRepair">待维修</p>
                            </li>
                            <li class="mui-table-view-cell orderText">
                                <p class="col-6">
                                    <span class="color1 text2-size">{{order.carPlateNumber}}</span>
                                </p>
                                <p class="col-6 mui-text-right">
                                    <span class="color2 text3-size">预估：</span>
                                    <span class="color1 text2-size">{{order.orderTotalAmount | currency '￥' 2}}</span>
                                </p>
                            </li>
                            <li class="mui-table-view-cell orderContacts">
                                <p class="color2 text3-size col-6 mui-pull-left">{{order.orderContact}}，{{order.orderContactPhone}}</p>
                                <p class="color1 text3-size col-6 mui-pull-right mui-text-right">
                                    {{order.orderAppointTime}}到店
                                </p>
                            </li>
                            <li class="mui-table-view-cell mui-clearfix">
                                <div class="orderOperateBtn mui-pull-right">
                                    <div class="mui-pull-left" @click.stop="finish(order.orderCode)">
                                        <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined confirmRepairBtn">维修竣工</button>
                                    </div>
                                    <div class="mui-pull-left" v-link="{name:'orderCancel',params:{id:order.orderCode}}">
                                        <button type="button" class="mui-btn mui-btn-outlined cancelOrderBtn">取消订单</button>
                                    </div>
                                </div>
                            </li>
                        </ul>
            </div>
            <!--已完成-->
            <div id="enterComplete" class="mui-control-content">
                        <!--没有已完成订单时显示-->
                        <div class="notOrder" v-if="completed.length==0">
                            <div class="orderIcon mui-text-center">
                                <i class="icon-daipingjia color7 text6-size"></i>
                            </div>
                            <p class="evaluateText mui-text-center color2 text2-size">暂无相关订单</p>
                        </div>
                        <!--有已完成订单时显示-->
                        <ul v-for="order in completed" class="mui-table-view mgb1" v-link="{name:'enterpriseOrderDetail',params:{id:order.orderCode}}">
                            <li class="mui-table-view-cell orderTitle">
                                <p class="col-8  text3">
                                    <span class="color1">订单编号:</span>
                                    <span class="color1">{{order.orderCode}}</span>
                                </p>
                                <p class="col-4 mui-text-right orderType finish">已完成</p>
                            </li>
                            <li class="mui-table-view-cell orderText">
                                <p class="col-6">
                                    <span class="color1 text2-size">{{order.carPlateNumber}}</span>
                                </p>
                                <p class="col-6 mui-text-right">
                                    <span class="color2 text3-size">预估：</span>
                                    <span class="color1 text2-size">{{order.orderTotalAmount | currency '￥' 2 }}</span>
                                    </span>
                                </p>
                            </li>
                            <li class="mui-table-view-cell orderContacts">
                                <p class="color2 text3-size col-6 mui-pull-left">{{order.orderContact}}，{{order.orderContactPhone}}</p>
                                <p class="color1 text3-size col-6 mui-pull-right mui-text-right">{{order.orderAppointTime}}到店</p>
                            </li>
                            <li class="mui-table-view-cell">
                                <div class="mui-pull-right orderOperateBtn">
                                    <div class="mui-pull-left"  style="padding-right: 0;">
                                        <button type="button" class="mui-btn mui-btn-primary viewRatingsBtn" v-link="{name:'enterpriseComments'}">查看评价</button>
                                    </div>
                                </div>
                            </li>
                        </ul>

            </div>
            <!--已关闭-->
            <div id="enterClose" class="mui-control-content">
                        <!--没有关闭订单时显示-->
                        <div class="notOrder" v-if="closed.length==0">
                            <div class="orderIcon mui-text-center">
                                <i class="icon-daipingjia color7 text6-size"></i>
                            </div>
                            <p class="evaluateText mui-text-center color2 text2-size">暂无相关订单</p>
                        </div>
                        <ul v-for="order in closed" class="mui-table-view mgb1" v-link="{name:'enterpriseOrderDetail',params:{id:order.orderCode}}">
                            <li class="mui-table-view-cell orderTitle">
                                <p class="col-8  text3">
                                    <span class="color1">订单编号:</span>
                                    <span class="color1">{{order.orderCode}}</span>
                                </p>
                                <p class="col-4 mui-text-right orderType alreadyClosed">已关闭</p>
                            </li>
                            <li class="mui-table-view-cell orderText">
                                <p class="col-6">
                                    <span class="color1 text2-size">{{order.carPlateNumber}}</span>
                                </p>
                                <p class="col-6 mui-text-right">
                                    <span class="color2 text3-size">预估：</span>
                                    <span class="color1 text2-size">{{order.orderTotalAmount | currency '￥' 2}}</span>
                                </p>
                            </li>
                            <li class="mui-table-view-cell orderContacts">
                                <p class="color2 text3-size col-6 mui-pull-left">{{order.orderContact}}，{{order.orderContactPhone}}</p>
                            </li>
                        </ul>
            </div>
        </div>
    </div>
        <footer-nav-component index="ucenterHome"/>
</template>
<style>
    .enterpriseOrder .tabClick{position: fixed;z-index: 1000; background-color: #fff; height: 1rem; line-height: 1rem; box-sizing: border-box; border-bottom: 1px solid #f0f0f0;}
    .enterpriseOrder .tabBox{top: 1.2rem; position: relative; z-index: 100; box-sizing: border-box; padding-bottom: 1rem; }
    .enterpriseOrder .tabClick>div{height: 1rem; line-height: 1rem; padding: 0 0.1rem; box-sizing: border-box;}
    .enterpriseOrder .tabClick>div>a{height: 1rem; line-height: 1rem;}
    .enterpriseOrder .tabClick>div>a>span{height: 1rem; line-height: 1rem;}
    .enterpriseOrder .mui-control-content {height: auto; overflow: hidden;}
    .enterpriseOrder .tabText{display: inline-block; position: relative; text-align: center; width: 100%; height: 100%;}
    .enterpriseOrder .tabText .mui-dot{background-color: #f45a58; border-radius: 100%; position: absolute; right: 0.08rem; top: 0.18rem; width:6px; height: 6px;  z-index: 1000;}
    .enterpriseOrder .mui-segmented-control{font-size: 0.3rem; line-height:0.6rem}
    .enterpriseOrder .mui-control-content{background-color: inherit !important;}
    .enterpriseOrder .orderType{font-size: .28rem !important; line-height: 0.4rem !important;}
    .notConfirm{color: #ff0000;}
    .notRepair{color: #0070c0;}
    .finish{color: #000000;}
    .notEvaluate{color:#00b050;}
    .alreadyClosed{color:#808080;}
    .enterpriseOrder .orderOperateBtn{display:inline-block; *display:inline; zoom:1;}
    .enterpriseOrder .orderOperateBtn>div>button{font-size: 0.3rem; width: 100%;}
    .enterpriseOrder .orderOperateBtn>div:first-child{padding-right:0.15rem;}
    .enterpriseOrder .orderOperateBtn>div:last-child{padding-left:0.15rem;}
    .enterpriseOrder .mui-scroll-wrapper {padding-bottom: 1.4rem;}
    /*没有订单状态图标*/
    .notOrder .orderIcon{width:1.2rem;height: 1.2rem; background-color: #d1d2d4; border-radius: 100%;  margin: 0.5rem auto 0.2rem;}
    .notOrder p{margin-bottom:0;}
    .notOrder .orderIcon i{line-height: 1.2rem;}
</style>
<script type="text/ecmascript-6">
    import '../../fonts/mui.css';
    import Page from '../../base/Page';
    import { API } from '../../config/constants';
    import datePickerComponent from '../../components/date-picker/date-picker.vue';
    import footerNavComponent from '../../components/footer-nav/footer-nav.vue';
    export default new Page({
        data(){
            return{
                orders:[],
                dtPkShow:false
            }
        },
        computed :{
            needConfirm:function () {
                return this.orderSplit(2);
            },
            needRepair:function () {
                return this.orderSplit(3);
            },
            completed:function () {
                return this.orderSplit(5);
            },
            closed:function () {
                return this.orderSplit(6);
            }
        },
        methods:{
            orderSplit:function (status) {
                var rtn = [];
                for (var i in this.orders) {
                    var order = this.orders[i];
                    if (order.orderStatus == status) {
                        rtn.push(order);
                    }
                }
                return rtn;
            },
            finish:function (orderCode) {
                let that = this;
                var btnArray = ['是', '否'];
                mui.confirm('车辆维修是否已竣工？','', btnArray, function(e) {
                    if (e.index == 0) {
                        //确认操作
                        that.post(API.POST_ORDER_SIGN, {orderCode:orderCode}, res => {
                            //TODO toast success
                            that.initOrders();
                        });
                    }
                })
            },
            initOrders:function () {
                //访问接口数据
                this.getJSON(API.GET_ORDER_LIST, {}, res => {
                    this.orders = res.resultData;
                });
            },
            /*修改预约时间*/
            datePicker: function () {
                (function ($) {
                    let that = this;
                    var bespokeTime = document.getElementById('bespokeTimeInput');
                    var bespokeTimeValue = bespokeTime.getElementsByTagName('span')[1];
                    var optionsJson = bespokeTime.getAttribute('data-options') || '{}';
                    var options = JSON.parse(optionsJson);
                    var now = new Date();
                    //月份
                    var oMonth=now.getMonth()+1;
                    var oBeginMonth;
                    var oEndMonth;
                    //日期
                    var oDay=now.getDate();
                    var oBeginDay;
                    var oendDay;
                    //小时
                    var oHours=now.getHours();
                    var oBeginHours;
                    var oEndHours;
                    //月份判断
                    if(oMonth==1||oMonth==2)
                    oDay<21?oEndMonth=oBeginMonth:oEndMonth=oBeginMonth+1;
                    //小时判断
                    oHours<8?oHours=8:oHours=oHours;
                    options.beginYear = now.getFullYear();
                    options.beginMonth = oMonth;
                    options.beginDay = now.getDate();
                    options.beginHours = oHours;
                    options.beginMinutes = now.getMinutes();
                    options.endMonth = oEndMonth;
                    options.endDay = now.getDate()+7;
                    //console.log(options.endDay);
                    options.endYear = now.getFullYear();
                    options.endHours = 17;
                    var id = bespokeTime.getAttribute('id');
                    var picker = new $.DtPicker(options);
                    picker.show(function (rs) {
                        bespokeTimeValue.innerText = rs.text;
                        /*that.appointTime = rs.text;*/
                        picker.dispose();
                    });
                })(mui)
            },

        },
        ready () {
            /*链接相应订单*/
            var tab = this.$route.params.tab;
            //console.log(tab);
            function siblings(elm) {
                var a = [];
                var p = elm.parentNode.children;
                for(var i =0,pl= p.length;i<pl;i++) {
                    if(p[i] !== elm) {
                        a.push(p[i]);
                    }
                }
                return a;
            };
            function siblingsClass(elm) {
                elm.classList.add("mui-active");
                for(var i=0; i<siblings(elm).length; i++){
                    siblings(elm)[i].classList.remove('mui-active');
                }
            };

            var EleItem=document.getElementById(tab+'Item');
            var Ele=document.getElementById(tab);
            siblingsClass(EleItem);
            siblingsClass(Ele);

            let that = this;
            //访问接口数据
            this.initOrders();

            mui.init({
                swipeBack: false
            });
            //让列表滚动
            for(var i=1; i<6; i++){
                mui('#scroll'+i).scroll({
                    indicators: true
                });
            }
        },
        components:{
            datePickerComponent,
            footerNavComponent
        }
    });

</script>